<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>书籍分类网站</title>  
    <link rel="stylesheet" href="shujifenlei.css">  
    <style>
       /* 基本样式 */  
body {  
  font-family: Arial, sans-serif;  
  margin: 0;  
  padding: 20px;  
}  
  
/* .book-list {   */
  /* 移除Flexbox相关的属性 */  
  /* display: flex;  
  flex-wrap: wrap;  
  justify-content: space-around; */  
/* }   */
  
.book-item {  
  /* 不再需要固定宽度，让元素自然堆叠 */  
  /* width: 200px; */  
  margin-bottom: 20px; /* 可以根据需要添加垂直间距 */  
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  
  border-radius: 5px;  
  overflow: hidden;  
}  
  
/* .book-cover {   */
  /* width: 100%; 图片宽度仍为100%   */
  /* height: auto;   */
  /* display: block; */
  /* margin: 0 auto; */
/* }   */
  
.book-details {  
  padding: 10px;  
  text-align: left;  
}  
  
.book-title {  
  margin: 0;  
  font-size: 18px;  
  font-weight: bold;  
}  
  
.book-author {  
  margin: 5px 0;  
  font-size: 14px;  
}  
  
.book-summary {  
  font-size: 12px;  
  color: #666;  
}  
.category{
    width: 1200px;
    /* height: 800px; */
}
  
/* 响应式布局（可选） - 在这里不需要特别的调整，因为已经是垂直堆叠了 */
    </style>
</head>  
<body>  
  
<!-- 头部区域 -->  
<header>  
    <nav>  
        <ul>  
            <li><a href="shouye.html">首页</a></li>  
            <li><a href="#">文学</a></li>  
            <li><a href="#">小说</a></li>  
            <li><a href="#">历史</a></li>  
            <li><a href="#">儿童</a></li>  
            <li><a href="more.html">更多...</a></li>  
        </ul>  
    </nav>  
</header>  
  
<!-- 主体区域 -->  
<main>  
  
    <!-- 轮播图/广告区域 -->  
    <section class="carousel">  
        <!-- 轮播图内容 -->  
        <div>
          <img src="images/top1.png" alt="top" style="width: 100%;">
        </div>
    </section>  
  
    <!-- 书籍分类区域 -->  
    <section class="categories">  
        <h2>书籍分类</h2>  
        <div class="category">  
            <h2>文学 =》</h2>  
            <!-- 文学分类下的书籍列表 -->  
            <div class="book-list">  
                <div class="book-item">  
                  <a href="demo26.html"><img src="images/傲慢与偏见.png" alt="傲慢与偏见" class="book-cover"></a>  
                  <div class="book-details">  
                    <h2 class="book-title">傲慢与偏见</h2>  
                    <p class="book-author">简•奥斯丁(Jane Austen)</p>  
                    <p class="book-summary">本书描写傲慢的单身青年达西与偏见的二小姐伊丽莎白、富裕的单身贵族彬格莱与贤淑的大小姐吉英之间的感情纠葛，
                        充分表达了作者本人的婚姻观，强调经济利益对恋爱和婚姻的影响。小说情节富有喜剧性，语言机智幽默，
                        是奥斯丁小说中最受欢迎的一部，并被多次改编成电影和电视剧。</p>  
                  </div>  
                </div>  
                  
                <!-- 更多的书籍项... -->  
                  
                <div class="book-item">  
                  <a href="demo25.html"><img src="images/老人与海.png" alt="老人与海" class="book-cover"></a>  
                  <div class="book-details">  
                    <h2 class="book-title">老人与海</h2>  
                    <p class="book-author">[美] 欧内斯特·海明威</p>  
                    <p class="book-summary">“人可以被毁灭，但不能被打败。”一位老人孤身在海上捕鱼，八十四天一无所获，等终于钓到大鱼，
                        用了两天两夜才将其刺死。返航途中突遭鲨鱼袭击，经过一天一夜的缠斗，大鱼仅存骨架。
                        但老人并未失去希望和信心，休整之后，准备再次出海……</p>  
                  </div>  
                </div>  
              </div>  
        </div>  
        <div class="category">  
            <h2>小说 =》</h2>  
            <!-- 小说分类下的书籍列表 --> 
            <div class="book-list">  
                <div class="book-item">  
                  <a href="demo35.html"><img src="images/旧物的灵魂.png" alt="旧物的灵魂" class="book-cover"></a>  
                  <div class="book-details">  
                    <h2 class="book-title">旧物的灵魂</h2>  
                    <p class="book-author">郭婷</p>  
                    <p class="book-summary">从古董店到古着，从古瓷到古书，《旧物的灵魂》立足于“物”，却与消费主义和囤积癖针锋相对。
                        四海为家的郭婷在学术游牧生涯中实践“旧物永续”的信念，
                        将每一个临时住处变成与友人分享美的驿站，以人类学家的视野爬梳旧物的历史，又赋予它们在使用中被珍惜的鲜活生命。</p>  
                  </div>  
                </div>  
                  
                <!-- 更多的书籍项... -->  
                  
                <div class="book-item">  
                  <a href="demo36.html"><img src="images/续窗边的小豆豆.png" alt="续窗边的小豆豆" class="book-cover"></a>  
                  <div class="book-details">  
                    <h2 class="book-title">续窗边的小豆豆</h2>  
                    <p class="book-author">[日] 黑柳彻子</p>  
                    <p class="book-summary">离开巴学园后，小豆豆心里开始出现“我的才能到底是什么”“我想成为……”的迷茫。每当此时，
                        她总会想起小林校长“你真是一个好孩子”这句话。</p>  
                  </div>  
                </div>  
              </div>   
        </div>  
        <div class="category">  
            <h2>历史 =》</h2>  
            <!-- 历史分类下的书籍列表 -->  
            <div class="book-list">  
                <div class="book-item">  
                  <a href="demo32.html"><img src="images/黄粱一梦.png" alt="黄粱一梦" class="book-cover"></a>  
                  <div class="book-details">  
                    <h2 class="book-title">黄粱一梦</h2>  
                    <p class="book-author">不明眼</p>  
                    <p class="book-summary">一个屡屡投资失败的冤种甜品师，<br>
                        一个刚正不阿的正一道士，<br>
                        一个母胎单身的遗体化妆师，<br>
                        一个初入社会的大学应届生，<br>
                        这样四个人凑在一起，究竟能不能把一个连死四个人的凶宅改造成网红甜品店？</p>  
                  </div>  
                </div>  
                  
                <!-- 更多的书籍项... -->  
                  
                <div class="book-item">  
                  <a href="demo33.html"><img src="images/强风吹拂.png" alt="强风吹拂" class="book-cover"></a>  
                  <div class="book-details">  
                    <h2 class="book-title">强风吹拂</h2>  
                    <p class="book-author">三浦紫苑</p>  
                    <p class="book-summary">长跑的目标不是更快，而是更强。
            
                        “明明这么痛苦，这么难过，为什么就是不能放弃跑步？
                        
                        因为全身细胞都在蠢蠢欲动，想要感受强风迎面吹拂的滋味。”</p>  
                  </div>  
                </div>  
              </div>   
        </div>  
        <!-- 更多分类... -->  
    </section>  
  
    <!-- 书籍推荐区域 -->  
    <!-- <section class="recommendations">  
        <h2>新书推荐</h2>  
         推荐书籍列表 
    </section>   -->
  
</main>  
  
<!-- 底部区域 -->  
<footer>  
    <p>版权信息 &copy; 2024 书籍分类网站</p>  
    <p>联系方式 | 服务条款 | 隐私政策</p>  
</footer>  
  
<!-- JavaScript文件（如果需要） -->  
<script src="scripts.js"></script>  
  
</body>  
</html>